<template>
  <div class="user-avatar-container">
    <Avatar
      :src="userStore.getUserAvatar"
      :status="userStore.currentUser?.status || 'offline'"
      :username="userStore.currentUser?.username"
      size="large"
      clickable
      title="用户头像"
      @click="handleUserAvatarClick"
    />
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import Avatar from '@/libs/Avatar/Avatar.vue'

const userStore = useUserStore()

// 处理用户头像点击
const handleUserAvatarClick = (): void => {
  console.log('用户头像被点击')
  // 这里可以添加打开用户资料或设置页面的逻辑
}

// 将事件暴露给父组件
defineExpose({
  handleUserAvatarClick
})
</script>

<style scoped>
.user-avatar-container {
  display: flex;
  justify-content: center;
  padding: 4px;
  /* 调整头像位置，往下移动10px */
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
